<template>
  <div style="width: 100%; height: 100%; display: flex; align-items: center">
    <div
      style="
        flex: 1.5;
        height: 99%;

        display: flex;
        flex-direction: column;
        align-items: center;
      "
    >
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #cacaca;
          width: 100%;
        "
      >
        <div style="font-size: 20px; color: white">预览列表</div>
        <div style="display: flex; align-items: center; font-size: 15px">
          <div
            style="
              display: flex;
              align-items: center;
              margin-right: 15px;
              cursor: pointer;
            "
          >
            <img
              src="../assets/刷新.png"
              style="width: 15px; height: 15px; margin-right: 5px"
              alt=""
            />
            刷新
          </div>
          <div
            style="
              display: flex;
              align-items: center;
              margin-right: 15px;
              cursor: pointer;
            "
          >
            <img
              src="../assets/添加.png"
              style="width: 15px; height: 15px; margin-right: 5px"
              alt=""
            />
            添加
          </div>
          <div style="display: flex; align-items: center; cursor: pointer">
            <img
              src="../assets/全部删除.png"
              style="width: 15px; height: 15px; margin-right: 5px"
              alt=""
            />
            全部删除
          </div>
        </div>
      </div>
      <div
        style="
          width: 95%;
          flex: 1;
          background: #1c1c1c;
          margin-top: 10px;
          border-radius: 10px;
          border: solid 2px #393939;
          display: flex;
          flex-direction: column;
          align-items: center;
          overflow: auto;
          -ms-overflow-style: none;
          scrollbar-width: none;
        "
      >
        <div
          v-for="(item, index) in programList"
          :key="index"
          style="
            width: 80%;
            display: flex;
            flex-direction: column;
            margin-top: 20px;
          "
        >
          <div
            @click="selectMainProgram(index)"
            style="
              cursor: pointer;
              width: 100%;
              padding: 10px 0;

              display: flex;
              align-items: center;
              border-radius: 5px;
            "
            :style="{
              background: selectedMainProgram == index ? '#27C48F' : '#282828',
              color: selectedMainProgram == index ? '#F9FDFC' : '#DCDCDC',
            }"
          >
            <img
              :src="
                selectedMainProgram == index
                  ? require('../assets/收起.png')
                  : require('../assets/展开.png')
              "
              style="width: 15px; height: 15px; margin: 0 10px"
              alt=""
            />
            <div style="flex: 1; text-align: left">
              {{ item.program_name }}
            </div>
            <div style="font-size: 13px">{{ item.pgDuration }}</div>
            <img
              :src="
                selectedMainProgram == index
                  ? require('../assets/deleteLighter.png')
                  : require('../assets/delete.png')
              "
              style="width: 15px; height: 15px; margin: 0 10px"
              alt=""
            />
          </div>
          <div
            v-if="selectedMainProgram == index"
            style="width: 100%; display: flex; flex-direction: column"
          >
            <div
              v-for="(sonItem, sonIndex) in item.programs"
              :key="sonIndex"
              style="width: 100%; display: flex; justify-content: end"
            >
              <div
                @click="selectSonProgram(sonIndex, sonItem)"
                style="
                  cursor: pointer;
                  width: 80%;

                  padding: 10px 0;
                  margin-top: 10px;
                  border-radius: 5px;
                  text-align: left;
                  padding-left: 10px;
                "
                :style="{
                  background:
                    selectedSonProgram == sonIndex ? '#27C48F' : '#282828',
                  color: selectedSonProgram == sonIndex ? '#F9FDFC' : '#cccccc',
                }"
              >
                {{ sonItem.media }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      style="
        flex: 9;
        height: 99%;

        display: flex;
        flex-direction: column;
        align-items: center;
      "
    >
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #cacaca;
          width: 98%;
        "
      >
        <div style="font-size: 20px; color: white">预览界面</div>
      </div>
      <div
        style="
          width: 98%;
          flex: 1;
          background: #1c1c1c;
          margin-top: 10px;
          border-radius: 10px;
          border: solid 2px #393939;
          display: flex;
          flex-direction: column;
          align-items: center;
          color: #a1a1a1;
        "
      >
        <div
          id="play_box"
          style="
            width: calc(100% - 40px);
            height: 85%;
            background: black;
            margin: 20px 0;
          "
          src=""
        ></div>
        <div
          style="
            width: calc(100% - 40px);
            flex: 1;
            margin-bottom: 20px;
            display: flex;
          "
        >
          <div
            style="
              display: flex;
              flex-direction: column;
              flex: 3;
              margin-right: 10px;
            "
          >
            <div style="width: 100%; text-align: left">预览操作：</div>
            <div
              style="
                flex: 1;
                width: 100%;
                height: 300px;
                background: yellow;
                background: #282828;
                margin-top: 10px;
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: space-around;
              "
            >
              <button
                style="
                  background: #27c48f;
                  color: white;
                  width: 100px;
                  padding: 10px 0;
                "
              >
                上一个
              </button>
              <button
                @click="onPlayer"
                style="
                  background: #27c48f;
                  color: white;
                  width: 100px;
                  padding: 10px 0;
                "
              >
                播放
              </button>
              <button
                @click="onPause"
                style="
                  background: #27c48f;
                  color: white;
                  width: 100px;
                  padding: 10px 0;
                "
              >
                暂停
              </button>
              <button
                @click="onStop"
                style="
                  background: #27c48f;
                  color: white;
                  width: 100px;
                  padding: 10px 0;
                "
              >
                停止
              </button>
              <button
                @click="onReplay"
                style="
                  background: #27c48f;
                  color: white;
                  width: 100px;
                  padding: 10px 0;
                "
              >
                重播
              </button>
              <button
                style="
                  background: #27c48f;
                  color: white;
                  width: 100px;
                  padding: 10px 0;
                "
              >
                下一个
              </button>
              <button
                style="
                  background: #27c48f;
                  color: white;
                  width: 100px;
                  padding: 10px 0;
                "
              >
                静音
              </button>
            </div>
          </div>
          <div style="display: flex; flex-direction: column; flex: 2">
            <div style="width: 100%; text-align: left">当前节目信息：</div>
            <div
              style="
                flex: 1;
                width: 100%;
                height: 300px;

                background: #282828;
                margin-top: 10px;
                border-radius: 10px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size: 12px;
              "
            >
              <div
                style="
                  width: 80%;
                  height: 20px;

                  display: flex;
                  align-items: center;
                "
              >
                <div
                  style="
                    flex: 1;
                    height: 20px;
                    display: flex;
                    align-items: center;
                  "
                >
                  <div style="flex: 1; text-align: right; margin-right: 10px">
                    节目单:
                  </div>
                  <div style="flex: 1; text-align: left">0325晚会节目</div>
                </div>
                <div
                  style="
                    flex: 1;
                    height: 20px;
                    display: flex;
                    align-items: center;
                  "
                >
                  <div style="flex: 1; text-align: right; margin-right: 10px">
                    计划类型:
                  </div>
                  <div style="flex: 1; text-align: left">月度播控</div>
                </div>
              </div>
              <div
                style="
                  width: 80%;
                  height: 20px;

                  display: flex;
                  align-items: center;
                "
              >
                <div
                  style="
                    flex: 1;
                    height: 20px;
                    display: flex;
                    align-items: center;
                  "
                >
                  <div style="flex: 1; text-align: right; margin-right: 10px">
                    资源总量:
                  </div>
                  <div style="flex: 1; text-align: left">25</div>
                </div>
                <div
                  style="
                    flex: 1;
                    height: 20px;
                    display: flex;
                    align-items: center;
                  "
                >
                  <div style="flex: 1; text-align: right; margin-right: 10px">
                    计划日期:
                  </div>
                  <div style="flex: 1; text-align: left">
                    03，04，05，06，15
                  </div>
                </div>
              </div>
              <div
                style="
                  width: 80%;
                  height: 20px;

                  display: flex;
                  align-items: center;
                "
              >
                <div
                  style="
                    flex: 1;
                    height: 20px;
                    display: flex;
                    align-items: center;
                  "
                >
                  <div style="flex: 1; text-align: right; margin-right: 10px">
                    节目时长:
                  </div>
                  <div style="flex: 1; text-align: left">25：25：64</div>
                </div>
                <div
                  style="
                    flex: 1;
                    height: 20px;
                    display: flex;
                    align-items: center;
                  "
                >
                  <div style="flex: 1; text-align: right; margin-right: 10px">
                    启动时间:
                  </div>
                  <div style="flex: 1; text-align: left">
                    09：00 12：00 18：00
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../axios/request";
export default {
  data() {
    return {
      videoUrl: null,
      config: {
        hasAudio: true,
        isLive: true,
        MSE: true,
        WCS: false,
        webGPU: true,
        gpuDecoder: true,
        watermark: {
          text: { content: "test", color: "black", opacity: "0.5", fontSize: "85" },
          right: 0,
          top: 0,
        },
      },
      isPlay: false,
      programList: [],
      selectedMainProgram: null,
      selectedSonProgram: null,
      easyplayer: null,
      curSuffix: null,
      curPid: null,
      curFid: null,
      playMode: null,
      socket: null,
      curPlayMode: null,
    };
  },
  methods: {
    playStream(flvUrl) {
      this.isPlay = true;
      setTimeout(
        (url) => {
          this.easyplayer &&
            this.easyplayer
              .play(url)
              .then(() => {
                console.log("播放");
              })
              .catch((e) => {
                console.error(e);
              });
        },
        0,
        flvUrl
      );
      this.socket.send(
        JSON.stringify({
          isPlay: this.isPlay,
          suffix: this.curSuffix,
          pl_id: this.curPid,
          file_id: this.curFid,
          playMode: this.playMode,
          user_name: localStorage.getItem("user_name"),
        })
      );
    },
    onDestroy() {
      let _this = this;
      return new Promise((resolve, reject) => {
        this.easyplayer.destroy();
        this.easyplayer = null;
        setTimeout(() => {
          resolve();
        }, 100);
      });
    },
    onReplay() {
      this.onDestroy().then(() => {
        this.playCreate();
        this.onPlayer();
      });
    },
    onStop() {
      this.isPlay = false;
      this.onDestroy().then(() => {
        this.playCreate();
        this.stopStream();
      });
    },
    async stopStream() {
      if (this.playMode == 1) {
        let res = await request({
          url: "/material/api/stopOnDemand",
          method: "POST",
          data: {
            command: 13,
            user_name: localStorage.getItem("user_name"),

            data: [
              {
                suffix: this.curSuffix,
              },
            ],
          },
        });
        if (res.data.status == 200) {
          console.log("已成功关闭资源点播");
        }
      } else {
        let res = await request({
          url: "/program/api/stopProgram",
          method: "POST",
          data: {
            command: 15,
            user_name: localStorage.getItem("user_name"),
            data: [
              {
                pl_id: this.curPid,
              },
            ],
          },
        });
        if (res.data.status == 200) {
          console.log("已成功关闭节目点播");
        }
      }
    },
    onPause() {
      this.easyplayer.pause();
    },
    async onPlayer() {
      if (
        this.playMode == null ||
        this.playMode != this.curPlayMode ||
        this.curPlayMode == 0
      ) {
        this.isPlay = false;
      }
      this.playMode = this.curPlayMode;
      this.curPlayMode = null;
      if (this.playMode == 1) {
        let res = await request({
          url:
            "/material/api/" + (this.isPlay ? "onDemand" : "onDemandWithTrans"),
          method: "POST",
          data: {
            command: 12,
            user_name: localStorage.getItem("user_name"),
            tokenId: this.tokenId,
            data: [
              {
                suffix: this.curSuffix,
                file_id: this.curFid,
              },
            ],
          },
        });
        if (res.data.status == 200) {
          console.log(res.data.data.data.flvUrl);

          this.playStream(res.data.data.data.flvUrl);
        }
      } else if (this.playMode == 0) {
        let res = await request({
          url:
            "/program/api/" + (this.isPlay ? "onDemand" : "onDemandWithTrans"),
          method: "POST",
          data: {
            command: 14,
            user_name: localStorage.getItem("user_name"),
            tokenId: this.tokenId,
            data: [
              {
                pl_id: this.curPid,
              },
            ],
          },
        });
        if (res.data.status == 200) {
          console.log(res.data.data.data);

          this.playStream(res.data.data.data.flvUrl);
        }
      }
    },
    selectMainProgram(index) {
      this.curPlayMode = 0;
      this.selectedMainProgram = index;
      this.selectedSonProgram = null;
      this.curSuffix = this.programList[index].suffix;
      this.curPid = this.programList[index].id;
    },
    selectSonProgram(index, item) {
      this.curPlayMode = 1;
      this.curFid = item.id;
      this.selectedSonProgram = index;
    },
    async getProgramList() {
      let res = await request({
        url: "/program/api/getProgramList",
        method: "POST",
        data: {
          command: 10,
          user_name: localStorage.getItem("user_name"),
          data: [
            {
              id: -1,
              pl_id: -1,
            },
          ],
        },
      });
      if (res.data.status == 200) {
        this.programList = res.data.data.data;
      }
    },
    playCreate() {
      let container = document.getElementById("play_box");
      let that = this;
      this.easyplayer = new EasyPlayerPro(container, {
        isLive: this.config.isLive, //默认 true
        bufferTime: 0.2, // 缓存时长
        stretch: false,
        MSE: this.config.MSE,
        WCS: this.config.WCS,
        hasAudio: this.config.hasAudio,
        watermark: { text: { content: "easyplayer-pro" }, right: 10, top: 10 },
      });
      this.easyplayer.on("fullscreen", function (flag) {
        console.log("is fullscreen", id, flag);
      });
      this.easyplayer.on("playbackRate", (rate) => {
        that.easyplayer.setRate(rate);
      });

      this.easyplayer.on("playbackSeek", (data) => {
        console.log("playbackSeek", data);
      });
    },
    async connectWs() {
      let res = await request({
        url: "/user/api/getRandomId",
        method: "GET",
      });
      if (res.data.status == 200) {
        this.tokenId = "preview" + res.data.data;
        this.initWs(this.tokenId);
      }
    },
    initWs(wsId) {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        let wsUrl = window.location.origin.replace("http://", "");
        // 实例化socket 111是固定的用户id,正式环境直接获取当前登录用户id
        this.socket = new WebSocket(
          "ws:" + "192.168.0.16:8093" + "/wsServer/" + wsId
        );
        // this.socket = new WebSocket("ws:" + wsUrl + "//wsServer/" + wsId);
        this.global.setWs(this.socket);
        let that = this;
        // 监听socket连接
        this.socket.onopen = () => {
          console.log("socket连接成功");
        };
        // 监听socket错误信息
        this.socket.onerror = () => {
          console.error("连接错误");
          this.initWs(wsId);
        };
        //监听socket消息
        this.socket.onmessage = (msg) => {
          let jsonObject = JSON.parse(msg.data);
          console.log(jsonObject);
        };
        // 监听socket关闭信息
        this.socket.onclose = (e) => {
          console.log("socket已经关闭");
        };
      }
    },
  },
  beforeDestroy() {
    // 组件销毁前关闭连接
    if (this.socket) {
      this.socket.close();
      this.socket = null;
    }
  },
  mounted() {
    this.connectWs();
    this.getProgramList();
    this.playCreate();
  },
};
</script>

<style scoped>
.icon-luxiang2 {
  display: none !important;
}
</style>